<template>
	<view>
		<view>
			<view>
				<view style="margin:20rpx 0 40rpx 100rpx;font-weight: 800;color:#0000FF;font-size: 46rpx;">全部信息
					<view class="leaveLine"></view>
				</view>
				<!-- <button class="leaveBtn" @click="leaveBtnFun()">提交</button> -->
			</view>
			<view class="leaveMgm">
				<checkbox-group class="leaveCheck" v-for="(item,index) in leaveArr" :key="index"
					style="margin-top:20rpx">
					<label style="display: flex;flex-direction: row;">
						<checkbox style="margin-top:10rpx" value="yes"></checkbox>
						<view style="width: 180rpx;font-size: 42rpx;">{{item.studentName}}</view>

						<view class="fontLeave">{{item.dormitoryNo}}宿舍</view>
						<view @click="displayDate(item)"
							style="color:#FF0088;font-size: 32rpx;width:330rpx;text-align: center;margin-top:6rpx;">
							请假修改
						</view>
						<!-- <span @click="CancelFun(item)" style="height:40rpx;background-color:#C0C0C0;padding:0 2rpx;
										color:white;border: #C0C0C0 solid 1rpx;border-radius: 10rpx;">
						取消</span> -->
					</label>


				</checkbox-group>
			</view>
		</view>
		<!-- <my-bottom :topName="topName"></my-bottom> -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	export default {
		name: 'leaveManagement',
		data() {
			return {
				url: "/pages_main/classTeacher/studentLeave/studentLeave",
				leaveDays: 0,
				leaveId: [],
				startDateLev: this.$date,
				endDateLev: this.$date,
				userName: '',
				endDateArray: [],
				startDateArray: [],
				studentNameArray: [],
				leaveDaysArray: [],
				phoneArray: [],
				studentNoArray: [],
				topName: "历史请假记录",
				leaveArr: [{
						student: '欧阳修',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": '12'
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '13',
							id: 34
						}],
						num: 1,
						isShow: false,
					},
					{
						student: '范增',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": ''
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '',
							id: 35
						}],
						num: 0,
						isShow: false,
					},
					{
						student: '杜甫',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": ''
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '',
							id: 36
						}],
						num: 0,
						isShow: false,
					},
					{
						student: '李白',
						dormitoryNum: '202宿舍',
						time: '请假时间',
						start: [{
							"year": '2022',
							"month": '3',
							"date": '12'
						}],
						end: [{
							"year": '2022',
							"month": '3',
							"date": '18',
							id: 37
						}],
						num: 6,
						isShow: false,
					}
				]
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})

		},
		onLoad() {
			this.userName = uni.getStorageSync("userName")
			this.getStuLeavesList()
		},

		components: {
			topCom,
			bottomCom,
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getStuLeavesList() {
				this.$api.teacher.getStuLeavesList(this.userName).then(res => {
					this.leaveArr = res.data
				})
			},
			displayDate(item) {
				this.$forceUpdate()
				uni.navigateTo({
					url: `/pages/leave/leaveHistoryDetail?id=${item.id}&startDate=${item.startDate}&endDate=${item.endDate}&studentName=${item.studentName}&className=${item.className}&sex=${item.sex}`
				})
			},
		}
	}
</script>

<style>
	.delSty {
		height: 40rpx;
		background-color: red;
		padding: 0 2rpx;
		color: white;
		border: red solid 1rpx;
		border-radius: 10rpx;
	}

	.delCancel {
		height: 40rpx;
		background-color: #C0C0C0;
		padding: 0 2rpx;
		color: white;
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
	}

	.isSlect {
		color: red;
	}

	.dateTimeNav {
		display: flex;
		justify-content: space-around;
		align-content: space-between
	}

	.dateTimeNavTitle {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		width: 400rpx;
	}

	.dateTimeNavTitleInput {
		display: inline-block;
	}

	.timePos {
		position: relative;
		top: 0rpx;
		right: -15rpx;
		background: white;
		border: 1rpx solid #cccc;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 90%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.fontLeave {
		display: flex;
		justify-content: flex-end;
		align-content: center;
		font-size: 32rpx;
		width: 160rpx;
		margin-top: 6rpx;
	}

	.checkbox {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}

	.leaveNum {
		width: 30rpx;
		height: 50rpx;
		border: #cccc solid 1rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -10rpx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;

	}

	.leaveCheck {
		margin-left: 80rpx;
		margin-bottom: 30upx;

	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}
</style>
